<template>
  <div>
    <h1>计数器:{{count}}</h1>
    <h2>getters计算属性的数据复杂的写法:{{total}}</h2>
    <h1>{{hobby}}</h1>
    <button @click="add">点击我加上1</button>
    <button @click="minus">点击我减去1</button>
    <button @click="evenAdd">点击我偶数加1</button>
    <button @click="oddMinus">点击我奇数减1</button>
    <button @click="addNine">点击我加上9</button>
    <button @click="delayAdd">点击我两秒之后加上1</button>
    <hr>
    <!-- 
       原生DOM也有这个事件:
       input:当文本框内容发生变化,立即触发事件
       change:当文本框内容发生变化(点击空白的地方)才会执行!!!
     -->
    <input type="text" :value="count" @input="changeHandler">
  </div>
</template>

<script>
//vuex提供一些辅助性的函数,函数可以把仓库的数据添加组件实例！！
//mapState是vuex分别暴露的函数,需要传递数组|对象
//mapGetters是vuex分别暴露的函数,需要传递数组|对象
import { mapState,mapGetters} from 'vuex';
export default {
  name: "",
  methods:{
      //点击按钮加上1的回调函数
      add(){
         //生活例子:张三派遣一个小弟,告诉他【去仓库办公室action,找到名字叫做add这个人,审批这次申请】
         //程序员:VC派发一个add类型的action
         this.$store.dispatch("add");
         console.log(this);
      },
      //点击减去1的回调函数
      minus(){
         //派发actions
         this.$store.dispatch('minus');
      }
      ,
      //偶数加上1
      evenAdd(){
         this.$store.dispatch('evenAdd');
      },
      //奇数减去1 
      oddMinus(){
         this.$store.dispatch('oddMinus');
      }
      ,
      //点击按钮加上9 
      addNine(){
         //派发action
         //第一个参数:vuex仓库里面的actions名字 
         //第二个参数:载荷【payload】,第二个参数起始就是VC组件实例给actions传递参数
         //没有第三个参数了
         this.$store.dispatch('addNine',9);
      }
      ,
      //两秒之后加上1的回调
      delayAdd(){
         //派发action
         this.$store.dispatch('delayAdd');
      },
      changeHandler(e){
          this.$store.dispatch('updateCount',e.target.value)
      }
  },
  //计算属性:利用已有的属性[$store]与属性值,创造出一个新的属性与属性值！！！
  //计算属性：缓存
  computed:{
      //数组里面书写的是state右侧对象的K,将仓库数据作为组件实例的数据!!!!
      ...mapState(['count','hobby']),
      ...mapGetters(['total'])
  },
};
</script>

<style scoped>
</style>
